<template>
    <div>
        <!-- 头部创建 -->
        <div class="bcg">
            &emsp;筛选列表&emsp;&emsp;&emsp; &emsp; <el-button
                @click="$router.push({ name: 'addpurchase' })">创建团购活动</el-button>
        </div>
        <div class="ipt">
            活动编号: &emsp;<span> <el-input v-model="ipt.id"></el-input></span>
            &emsp;&emsp;&emsp;&emsp; &emsp; 活动名称: &emsp;<span> <el-input v-model="ipt.name"></el-input></span>
            &emsp;&emsp;&emsp;&emsp; &emsp; 活动开始时间: &emsp; <el-date-picker v-model="value1" type="datetime"
                placeholder="选择日期时间">
            </el-date-picker>
        </div>
        <div class="ipt">
            参与商品: &emsp;<span> <el-input v-model="ipt.products"></el-input></span>
            &emsp;&emsp;&emsp;&emsp; &emsp; 参与门店: &emsp;<span> <el-input v-model="ipt.ipt4"></el-input></span>
            &emsp;&emsp;&emsp;&emsp; &emsp; 活动结束时间: &emsp; <el-date-picker v-model="value2" type="datetime"
                placeholder="选择日期时间">
            </el-date-picker>
        </div>
        <!-- 活动状态 -->
        <div style="margin-bottom: 10px;">
            活动状态: <el-button type="">全部</el-button> <el-button type="">预告中</el-button> <el-button
                type="">待开始</el-button> <el-button type="">进行中</el-button> <el-button type="">已结束</el-button>
            <div class="fr">
                <el-button type="" @click="seach">查询</el-button> <el-button type="" @click="reset">重置</el-button>
            </div>
        </div>
        <div class="bcg">
            &emsp; 数据列表
        </div>
        <!-- 下面表格 -->
        <el-table border ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection">
            </el-table-column>
            <el-table-column label="活动编号">
                <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column prop="name" label="活动名称">
            </el-table-column>
            <el-table-column prop="startTime" label="开始时间" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="endTime" label="结束时间" show-overflow-tooltip>
            </el-table-column>
            <el-table-column show-overflow-tooltip>
                <template slot-scope="">
                    <el-button @click="$router.push({ name: 'xinxi' })" type="text">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import { GetChannl } from '@/api/channel'
export default {
    data() {
        return {
            ipt: {
                products: "",
                id: "",
                name: "",
                ipt4: "",
            },
            value1: '',//开始时间绑定数据
            value2: '',//结束时间绑定数据
            tableData: [{ //表格绑定数据
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }]
        }
    },
    created() {
        this.getChannl()
    },
    methods: {
        reset() {
            this.ipt = {}
            this.getChannl()
        },
        getChannl() {
            var search = {};
            for (var k in this.ipt) {
                if (this.ipt[k]) {
                    search[k] = this.ipt[k]
                }
            }
            console.log(search);
            GetChannl(search).then(res => {
                console.log(res);
                this.tableData = res.data.data
            })
        },
        seach() {
            this.getChannl()
        },
        handleSelectionChange(val) {
            console.log(val);
            this.multipleSelection = val;
        }

    },

}
</script>

<style lang="scss" scoped>
.fr {
    // display: inline-block;
    float: right;
}

.ipt {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 20px;

    div {
        margin-right: 30px;
    }
}

.bcg {
    height: 40px;
    line-height: 40px;
    background-color: rgb(243, 243, 243);
    margin-left: -16px;
    margin-right: -16px;
}
</style>